<template>
    <div class="pug-menubox" :style="{width:$store.state.menu.slideWidth}">
        <el-menu :default-active="defaultActive" :unique-opened="true"  class="border-0"  :collapse="isCollapse" @select="handleSelectMenu" :collapse-transition="false">
            <template v-for="(menu,index) in menuList" :key="index">
                <el-sub-menu :index="menu.name" v-if="menu.children && menu.children.length > 0">
                    <template #title>
                        <el-icon>
                            <component :is="menu.icon"></component>
                        </el-icon>
                        <span>{{menu.name}}</span>
                    </template>
                    <el-menu-item  v-for="(item,cindex) in menu.children" :index="item.path" :key="cindex">
                         <el-icon><component :is="item.icon"></component></el-icon>  
                         <span>{{item.name}}</span>
                    </el-menu-item>
                </el-sub-menu>
                <el-menu-item v-else :index="menu.path">
                    <el-icon>
                       <component :is="menu.icon"></component>
                    </el-icon>    
                    <span>{{menu.name}}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<script setup>

import { computed } from 'vue';
import {useRouter,useRoute,onBeforeRouteUpdate} from 'vue-router'
import {useStore} from 'vuex'
// 获取路由对象
var router = useRouter();
// 获取当前路由参数和地址
var route = useRoute();
// 获取状态管理
var store = useStore();

// 获取状态管理的折叠效果
var isCollapse = computed(()=>store.state.menu.isCollapse);

// 激活选中的目录,
var defaultActive = computed(()=> {
    return route.path;
})

// 或者使用监听路由变化
// onBeforeRouteUpdate((to,from)=>{
//     defaultActive.value = to.path;
// })


// 菜单栏的数据
const menuList = computed(()=>store.state.menu.menuList)
// 点击菜单进行导航
const handleSelectMenu = (item)=>{
    store.commit("menu/addPath",item);
    router.push(item);
}

</script>
<style>
.pug-menubox {
    top: 55px;
    width: 208px;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    overflow-x: hidden;
    @apply fixed shadow-md bg-light-200;
}

.pug-menubox::-webkit-scrollbar{width: 0px;} 
</style>